.no-margin
  margin 0 !important
.no-padding
  padding 0 !important
.no-border
  border 0 !important
.no-border-radius
  border-radius 0 !important
.no-box-shadow
  box-shadow none !important

.ellipsis
  text-overflow ellipsis
  white-space nowrap
  overflow hidden

  &-2-lines, &-3-lines
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
  &-2-lines
    -webkit-line-clamp 2
  &-3-lines
    -webkit-line-clamp 3

.readonly, [readonly], .disabled, [disabled]
  &, * // @stylint ignore
    cursor not-allowed !important
.disabled, [disabled]
  opacity .6 !important

.hidden
  display none !important
.invisible
  visibility hidden !important
.transparent
  background transparent !important

.overflow-auto
  overflow auto !important
.overflow-hidden
  overflow hidden !important

.dimmed, .light-dimmed
  &:after
    content ''
    position absolute
    top 0
    right 0
    bottom 0
    left 0
.dimmed:after
  background $dimmed-background !important
.light-dimmed:after
  background $light-dimmed-background !important
body
  &.dimmed, &.light-dimmed
    &:after
      z-index $z-body-dimmed !important
.z-absolute
  z-index $z-absolute !important

for type in desktop mobile cordova electron ios mat touch within-iframe platform-ios platform-android
  body:not(.{type}) .{type}-only,
  body.{type} .{type}-hide
    display none !important

@media all and (orientation portrait)
  .orientation-landscape
    display none !important

@media all and (orientation landscape)
  .orientation-portrait
    display none !important

@media (max-width $breakpoint-xs-max)
  .xs-hide, .gt-xs, .sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-sm-min) and (max-width $breakpoint-sm-max)
  .sm-hide, .xs, .lt-sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
  .md-hide, .xs, .lt-sm, .sm, .lt-md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
  .lg-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-xl-min)
  .xl-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .lg, .lt-xl
    display none !important

.q-focus-helper
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  pointer-events none
  border-radius inherit
  background currentColor
  opacity 0
  transition opacity .12s ease-in

.q-focusable:focus, .q-hoverable:hover
  .q-focus-helper
    opacity .15

body.ios .q-hoverable:active .q-focus-helper
  opacity .3
